<template>
  <div class="main-block" @click="gotoXq(list.id)">
    <!-- 图片 -->
    <div class="avatar">
      <div class="imgbg">
        <img :src="`${list.img}`" alt="" />
      </div>
    </div>
    <!-- 右 -->
    <div class="mb-outline-b content-wrapper">
      <div class="column content">
        <div class="box-flex movie-title">
          <div class="title v2dimax_title">{{ list.nm }}</div>
          <span class="version v2d imax"></span>
        </div>
        <div class="detail column">
          <div class="score line-ellipsis">
            <span class="score-suffix">点映评 </span
            ><span class="grade">{{ list.sc }}</span>
          </div>
          <div class="actor line-ellipsis">主演:{{ list.star }}</div>
          <div class="show-info line-ellipsis">{{ list.showInfo }}</div>
        </div>
      </div>
      <div class="button-block" data-id="338380">
        <div
         @click.stop="
            $router.push({ path: '/buyticket', query: { id: list.id } })
          "
          class="btn normal"
          :style="list.showStateButton | getShowState(list.showStateButton)"
          style="
            background-color: #f03d37;
            box-shadow: 0 0.04rem 0.04rem 0 rgba(240, 61, 55, 0.15);
          "
        >
          <span class="fix">{{ list.showStateButton.content }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Object,
  },
  filters: {
    getShowState(e) {
      var res1 = {
        background: "#F03D37",
        color: "white",
      };

      var res2 = {
        background: "#3C9FE6",
        color: "white",
      };
      return e.content == "购票" ? res1 : res2;
    },
  },
  methods: {
    gotoXq(id) {
      console.log(id);
      this.$router.push("/info/" + id);
    },
  },
};
</script>

<style lang="less">
.main-block {
  position: relative;
  width: 100%;
  .avatar {
    width: 64px;
    height: 95px;
    position: relative;
    margin-top: 12px;
    float: left;

    .imgbg {
      background-color: #e1e1e1;
      background-size: 100% 100%;
      img {
        background-color: transparent;
        width: 100%;
        height: 90px;
      }
    }
  }

  // 右
  .content-wrapper {
    padding: 12px 14px 12px 0px;
    margin-left: 74px;
    height: 90px;
    max-height: 90px;
    position: relative;
    background-size: 1px 1px;
    .content {
      padding-right: 5px;
      margin-right: 48px;
      overflow: hidden;

      // 右上
      .movie-title {
        display: flex;
        max-height: 24px;
        margin-bottom: 7px;
        line-height: 24px;
        overflow: hidden;
        .title {
          font-size: 17px;
          color: #333;
          font-weight: 700;
          padding-right: 5px;
          flex-shrink: 1;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          // width: 68px;
        }
        .imax {
          // width: 43px;
          background-image: url("../assets/v2dimax.png");
          background-size: contain;
          background-repeat: no-repeat;
          height: 14px;
          width: 43px;
          display: inline-block;
          margin-top: 5px;
          flex: 0 0 auto;
          margin-right: 3px;
        }
      }
      .detail > div + div {
        margin-top: 6px;
        line-height: 15px;
      }
      .detail {
        box-sizing: border-box;
        line-height: 1;
        overflow: hidden;
        .actor {
          text-align: left;
          font-size: 13px;
          color: #666;
        }
        .score {
          text-align: left;
          font-size: 13px;
          color: #666;

          .grade {
            font-weight: 700;
            color: #faaf00;
            font-size: 15px;
          }
        }
        .show-info {
          text-align: left;
          font-size: 13px;
          color: #666;
        }

        .line-ellipsis {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .button-block {
      font-size: 12px;
      position: absolute;
      right: 14px;
      top: 0;
      bottom: 0;
      height: 28px;
      margin: auto;
      .btn {
        width: 54px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        background-color: #f03d37;
        color: #fff;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        border-radius: 13.5px;
      }
    }
  }
}
</style>